<template>
  <div class="op-peight">
    <head-bar type="3"></head-bar>
    <div class="content">
      <div class="left">
        <div>
          <n-space justify="start">
            <div style="margin-top: -10px">
              请输入矩阵（使用空格分隔）
            </div>
          </n-space>
          <n-space justify="center" style="margin-top: 10px">
            <n-input
              type="textarea"
              class="matrix"
              placeholder="矩阵"
              v-model:value="m_in"
            ></n-input>
          </n-space>
        </div>
        <n-space justify="space-between" style="margin: 50px 60px 0">
          <n-button class="btn" @click="analyzeM">开始分析</n-button>
          <n-button class="btn" @click="$router.push('/router')"
            >返回首页</n-button
          >
        </n-space>
      </div>
      <div class="right">
        <n-data-table
          ref="table"
          :columns="columns2"
          :data="data2"
          :max-height="150"
        >
        </n-data-table>

        <n-data-table
          ref="table"
          :columns="columns"
          :data="data"
          :max-height="150"
          style="margin-top: 50px"
        >
        </n-data-table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import HeadBar from '@components/Head.vue';

import { Settings as SettingIcon } from '@vicons/ionicons5';

const id = ref(1);
const setting = ref(false);
const checkedValue = ref('32');
const select1 = ref(1);
const items1 = [
  {
    value: 1,
    label: 'Toeplitz矩阵构造方法',
  },
  {
    value: 2,
    label: '对合矩阵构造方法',
  },
  {
    value: 3,
    label: '循环矩阵构造方法',
  },
];

const select2 = ref(1);
const items2 = [
  {
    value: 1,
    label: 'GF(2, 4)',
  },
  {
    value: 2,
    label: 'GF(2, 8)',
  },
];

const select3 = ref(1);
const items3 = [
  {
    value: 1,
    label: '4*4',
  },
  {
    value: 2,
    label: '5*5',
  },
  {
    value: 3,
    label: '6*6',
  },
];
const height = computed(() => {
  return (50 / (select3.value + 3)).toString() + 'vh';
});

const columns = [
  // {
  //   title: '矩阵序号',
  //   key: 'matrixId',
  //   defaultSortOrder: 'ascend',
  //   sorter: 'default',
  //   align: 'center',
  // },

  {
    title: '矩阵异或数',
    key: 'xors',
    // sorter: (row1, row2) => row1.xors - row2.xors,
    align: 'center',
  },
  {
    title: 'Hamming重量',
    key: 'weight',
    // sorter: (row1, row2) => row1.weight - row2.weight,
    align: 'center',
  },
  // {
  //   title: '是否对合',
  //   key: 'duihe',
  //   sorter: (row1, row2) => {
  //     let index1 = row1.duihe === '是' ? 1 : 0;
  //     let index2 = row2.duihe === '是' ? 1 : 0;
  //     return index1 - index2;
  //   },
  // },
];

const data = ref([
  {
    matrixId: 0,
    weight: 0,
    xors: 0,
    duihe: '',
  },
]);

const columns2 = [
  {
    title: 'MDS矩阵',
    key: 'mds',
    defaultSortOrder: 'ascend',
    // sorter: 'default',
    align: 'center',
  },
  {
    title: '对合矩阵',
    key: 'duihe',
    align: 'center',
    // sorter: (row1, row2) => {
    //   let index1 = row1.duihe === '是' ? 1 : 0;
    //   let index2 = row2.duihe === '是' ? 1 : 0;
    //   return index1 - index2;
    // },
  },
];

const data2 = ref([
  {
    mds: '否',
    duihe: '否',
  },
]);
// 输入矩阵m_in
const m_in = ref('');

// 矩阵分析后端接口
import { Example } from '@/api/example';
const analyzeM = () => {
  // console.log("analyze", m_in.value);
  Example.analyze({
    m_in: m_in.value,
    input_type: checkedValue.value,
  }).then((res) => {
    console.log(res.data);
    data.value[0].xors = res.data.xors;
    data.value[0].weight = res.data.hammingWeight;
    if (res.data.isMds == 1) {
      data2.value[0].mds = '是';
    } else {
      data2.value[0].mds = '否';
    }
  });
};
</script>

<style scoped>
.content {
  margin: 60px 50px 0;
  display: flex;
  justify-content: space-around;
}
.left {
  width: 600px;
  height: 400px;
  display: flex;
  flex-flow: column;
}
.right {
  width: 700px;
  height: 400px;
  display: flex;
  flex-flow: column;
}
.title {
  height: 40px;
  width: 200px;
  color: white;
  background-color: rgb(92,170,243);
}
.btn {
  color: white;
  background-color: rgb(92,170,243);
  height: 40px;
  width: 150px;
  border-radius: 12px;
}
.select {
  width: 250px;
}
:deep(.n-base-selection) .n-base-selection-label {
  height: 40px !important;
}
.matrix {
  background-color: #f1f1f1;
  width: 700px;
  height: 200px;
}
:deep(.n-data-table) .n-data-table-td {
  padding: 6px;
}
:deep(.n-radio-group).n-radio-group--button-group .n-radio-button {
  width: 100px;
  text-align: center;
}
</style>
